<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>SeekBar widget</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Android, programming, SeekBar widget, tutorial, 
Java, mobile development">
<meta name="description" content="In this chapter of the Android tutorial, we present
the SeekBar widget.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>SeekBar widget</h1>


<p>
In this chapter of the Android development tutorial we will present the SeekBar
widget.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The SeekBar widget is used to select a value from a range of values.
The user drags a thumb of the widget to select a specific value. 
To process the SeekBar events, we implement the 
<i>SeekBar.OnSeekBarChangeListener</i> listener.
</p>


<h2>SeekBar example</h2>
 
<p>
We have a SeekBar widget and a TextView widget. The current value from
the SeekBar is displayed in the TextView. Android manifest file is 
left untouched.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;  
&lt;SeekBar
   android:id="@+id/sbId"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_margin="10dp"
   android:max="100"
   android:progress="50"
   /&gt;
&lt;TextView
    android:id="@+id/tvId"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    /&gt;     
&lt;/LinearLayout&gt;
</pre>

<p>
In the <i>main.xml</i> layout file, we have two widgets defined. The SeekBar 
widget and the TextView widget. 
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;SeekBar&lt;/string&gt;
    &lt;string name="init_tv_value"&gt;50&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
This is <i>strings.xml</i> resource file. The init_tv_value is the
initial value of the TextView widget. 
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.seekbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class MainActivity extends Activity implements 
    OnSeekBarChangeListener
{
    TextView tv;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        SeekBar sb = (SeekBar) findViewById(R.id.sbId);
        sb.setOnSeekBarChangeListener(this);

        tv = (TextView) findViewById(R.id.tvId);
        String val = this.getString(R.string.init_tv_value);
        tv.setText(val);
    }

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) 
   {
       tv.setText(String.valueOf(progress));
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) 
   {
       // not implemented 
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) 
   {
       // not implemented 
   }
}
</pre>

<p>
The current value from the SeekBar is set to the TextView widget. 
</p>

<pre class="explanation">
public class MainActivity extends Activity implements 
    OnSeekBarChangeListener
</pre>

<p>
The MainActivity class implements the OnSeekBarChangeListener. 
We neet to define three abstract methods. The onProgressChanged(), 
the onStartTrackingTouch() and the onStopTrackingTouch() method.
The last two methods are not implemented. They are related to touch
gestures. We provide only empty methods.
</p>

<pre class="explanation">
SeekBar sb = (SeekBar) findViewById(R.id.sbId);
sb.setOnSeekBarChangeListener(this);
</pre>

<p>
We get the reference to the SeekBar widget and set a listener for it.
</p>

<pre class="explanation">
tv = (TextView) findViewById(R.id.tvId);
String val = this.getString(R.string.init_tv_value);
tv.setText(val);
</pre>

<p>
We get the reference to the TextView widget. We retrieve the
init_tv_value from the string resources and set it to the TextView.
</p>

<pre class="explanation">
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
    boolean fromUser) 
{
    tv.setText(String.valueOf(progress));
}
</pre>

<p>
When we move the thumb of the SeekBar, the <code>onProgressChanged()</code>
method is called. The progress parameter is the current value of the SeekBar.
The default range is 0..100. We set the current value of the SeekBar to the TextView
widget. 
</p>

<img src="/img/java/android/seekbar.png" alt="SeekBar widget">
<div class="figure">
Figure: SeekBar widget
</div>


<p>
In this chapter of the Android development tutorial, we have written about
the SeekBar widget. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 5, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

